<template>
  <div class="tl-layout">
        <!-- 头部 -->
        <div class="tl-title">
            <h1>{{ title }}</h1>
            <ul>
                <template v-for="(item,index) in titleList" :key="index">
                    <li>{{ item }}</li>
                    <li>|</li>
                </template>
                <li>更多></li>
            </ul>
            <div class="page" v-if="isPage">
                <a href="">&lt;</a>
                <a href="">&gt;</a>
            </div>
        </div>
        <!-- 插槽 -->
        <slot style=""></slot>
    </div>
</template>

<script>
export default {
    name:'Item',
    props:{
        title:String,
        titleList:Array,
        isPage:Boolean,
        imgMaxHeight:String
    }
}
</script>

<style>
.tl-layout{
    width: 100%;
    /* 后期删除 */
    /* height: 300px; */
    padding-top: 30px;
    /* 清除浮动 */
    clear: both;
    /* background-color: green; */
}
.tl-title{
    width: 100%;
    height: 46px;
    /* background-color: aqua; */
}
.tl-title > h1{
    color: rgba(255, 255, 255, 0.9);
    float: left;
}
.tl-title > ul{
    list-style: none;
    float: left;
}
.tl-title > ul > li{
    float: left;
    margin-left: 16px;
    line-height: 46px;
    color: rgba(255, 255, 255, 0.9);
}
.tl-title > ul > li:nth-child(even){
    color: #ffffff24;
}
.page{
    float: right;
    height: 46px;
}
.page a{
    display: block;
    float: left;
    text-decoration: none;
    margin: 0 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    color: #14161a;
    background-color: #26282b;
    margin-top: 13px;
}
.page a:nth-child(2){
    background-color: #37393c;
}
</style>